<template>
  <div class="city-group">
    <van-index-bar :index-list="indexList">

      <van-index-anchor index="热门"/>
        <div class="list">
          <template v-for="(city, index) in groupData.hotCities" :key="index">
          <div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
          </template>
        </div>

      <template v-for="(group, index) in groupData.cities" :key="index">
        <van-index-anchor :index="group.group"></van-index-anchor>
        <template v-for="(city, indey) in group.cities" :key="indey">
        <van-cell :title="city.cityName" @click="cityClick(city)"/>
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from "vue"
import { useRouter } from "vue-router"
import useCityStore  from "@/store/modules/city"

  const props = defineProps({
    groupData: {
      type: Object,
      default: () => ({})
    }
  })
  const indexList = computed(()=>{
    const list = props.groupData.cities.map(item => item.group)
    list.unshift("#")
    return list
  })
  const router = useRouter()
  const cityStore = useCityStore()
  const cityClick = (city) => {
    cityStore.currentCity = city
    router.back()
  }
</script>

<style lang="less" scoped>
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-right: 25px;
    padding: 15px;
    .city {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 70px;
      height: 28px;
      font-size: 16px;
      border-radius: 14px;
      margin: 6px 0;
      background-color: #fff4ec;
    }
  }
</style>
